<template>
	<view class="topic_container">
		
		<!-- 1.0  显示题目详情 -->
		<view class="topic_main">
			<swiper :current="current" :indicator-dots="true"  :interval="3000" :duration="1000">
				
				<swiper-item v-for="(item,index) in this.topics">
					<view class="swiper-item">
						<view class="top">
							<text>{{index + 1}} / {{total}}</text>
						</view>
						<!-- 题目内容区域 -->
						<topic_wrap :topic="item"></topic_wrap>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 2.0 切换题目/收藏 -->
		<view class="topic_footer">
			<view class="box">
				<view class="left">
					 <button @click="prevFn" class="btn btn-prev">上一题</button>
					 <button @click="nextFn" class="btn btn-next">下一题</button>
				</view>
				<view class="right">
					<view>收藏</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入组件
    import topic_wrap from '../../components/topic_wrap/topic_wrap.vue';
	
	export default {
		data(){
			return {
				topics: [],//数组
				id: "",
				current: 0,
				total: 0
			}
		},
		onLoad(option){
			let str = uni.getStorageSync("TOPIC_LIST")
			if(option.id){
				this.id =  option.id;
				// 判断本地是否有值
				if(str){
					// 把字符串解析成对象
					this.topics = JSON.parse(str);
					this.total = this.topics.length;//当前总数量
					for(let i = 0 ; i < this.topics.length ; i ++){
						if(this.id == this.topics[i]._id){
							//获取当前题目的下标（索引）
							this.current = i;
							// 终止循环
							break;
						}
					}
					console.log("题目索引:",this.current)
				}
			}
		},
		// 编写方法
		methods: {
			// 使实现点击按钮切换题目点
			prevFn(){
				// 上一题
				// 通过控制数组的索引，实现题目的切换
				let v = this.current;
				v --
				if(v <= 0) v =0;
				this.current = v;
			},
			nextFn(){
				// 下一题
				let v = this.current;
				v ++
				if(v > this.total - 1 )  v = (this.total - 1);
				this.current = v;
			},
		}
		
	}
	
</script>



<style lang="scss">
.top {
	padding: 20rpx 30rpx 0;
	font-weight: bold;
	text-align: center;
}
.topic_main {
	position: fixed;
	top: 88rpx;
	left: 0;
	width: 100%;
	height: 100%;
	// z-index: 1000;
	swiper , .swiper-item {
		width: 100%;
		height: 100% !important;
	}
	
}

.topic_footer {
	width: 100%;
	height: 100rpx;
	position: fixed;
	bottom: 20rpx;
	left: 0;
	z-index: 10000;
	.box {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		.left {
			display: flex;
			.btn {
				padding: 0;
				margin: 0;
				font-size: 32rpx;
				margin-right: 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				width: 120rpx;
				color: #666;
				background-color: transparent;
				&::after {
					border: 0;
				}
			}
		}
		.right {
			height: 80rpx;
			line-height: 80rpx;
			width: 120rpx;
			text-align: center;
		}
	}
}
</style>
